<template>
  <div class="order-detail">
    <!-- 顶部导航-->
    <van-nav-bar @click-left="$router.go(-1)" left-arrow title="订单详情"/>

    <!--快递物流显示-->
    <van-row class="express-container" @click="clickExpress">

      <!--左-->
      <van-col offset="1" span="5" class="express-left">
        <span class="left-icon-container">
          <img :src="expressIcon" class="left-img" alt=""/>
        </span>
      </van-col>

      <!--中-->
      <van-col span="13" class="express-content">
        <div class="express-body">
          <div v-if="flag" class="express_container">
            <p>商品还没有物流消息</p>
          </div>
          <div v-else>
            <p>{{ shopInfoDetail.logisticsInfoObj.content }}</p>
            <p>{{ shopInfoDetail.logisticsInfoObj.createAt | timeFormat }}</p>
          </div>
        </div>
      </van-col>

      <!-- 右-->
      <van-col span="2" offset="3" class="express-right">
        <van-icon name="arrow" class="right-icon"/>
      </van-col>

    </van-row>

    <!-- 地址显示-->
    <van-row class="address-container">
      <van-col offset="1" span="5" class="address-left">
        <span class="left-icon-container">
          <img :src="LocationIcon" class="left-img" alt=""/>
        </span>
      </van-col>
      <van-col span="18" class="address-content">
        <div class="address-body">
          <p>+86-{{ shopInfoDetail.deliveryMobile }}</p>
          <p>{{ shopInfoDetail.address }}</p>
        </div>
      </van-col>
    </van-row>

    <!-- 订单详细情况-->
    <div class="shopInfo-container">
      <div class="shopInfo-body">

        <div class="shopInfo-title">
          <van-icon name="shop-o" class="shop-icon"/>
          <span class="title-content">天天书店</span>
          <van-icon name="arrow" class="shop-allow"/>
        </div>

        <van-row class="shopInfo">
          <van-col span="7" offset="1" class="shopInfo-left">
            <img :src="shopInfoDetail.imageUrl" alt="">
          </van-col>
          <van-col span="12" class="shopInfo-content">
            <p class="name">{{ shopInfoDetail.name }}</p>
            <p class="description">{{ shopInfoDetail.description }}</p>
          </van-col>
          <van-col span="4" class="shopInfo-right">
            <p>{{ shopInfoDetail.salePrice | moneyFormat }}</p>
            <p>x{{ shopInfoDetail.count }}</p>
          </van-col>
        </van-row>

        <div class="operate">
          <van-button type="default" size="small" class="operateBtn" round @click="sell">卖了换钱</van-button>
          <van-button type="default" size="small" class="operateBtn" round @click="application">退款
          </van-button>
        </div>

        <div class="priceInfo">
          <p>商品总价<span>{{ shopInfoDetail.salePrice | moneyFormat }}</span></p>
          <p>运费<span>{{ shopInfoDetail.freight | moneyFormat }}</span></p>
          <p>实付款 <span>{{ shopInfoDetail.salePrice + shopInfoDetail.freight | moneyFormat }}</span></p>
        </div>
      </div>
    </div>

    <!-- 订单信息-->
    <div class="orderInfo">
      <p class="order-label">订单信息 </p>
      <p class="order-id">订单编号 <span>{{ shopInfoDetail.orderId }}</span></p>
      <p class="order-createTime">创建时间 <span>{{ shopInfoDetail.createdAt   | timeFormat }}</span></p>
    </div>

  </div>
</template>

<script>
import filter from "../../filters/filter";

export default {
  name: "OrderDetail",
  data() {
    return {
      expressIcon: require("../../assets/Images/truck.png"),
      LocationIcon: require("../../assets/Images/dingwei.png"),
      shopInfoDetail: {},
      logisticsInfo: {},
      flag: true
    };
  },

  filters: {
    moneyFormat(money) {
      return filter.moneyFormat(money);
    },
    timeFormat(date) {
      return filter.timeFormat(date);
    }
  },

  created() {
    this.getOrderDetail();
  },

  methods: {
    // 点击物流详情实现弹窗 显示具体的物流信息
    clickExpress() {
      this.$router.push({path: '/logisticsInformation', query: {orderId: this.shopInfoDetail.orderId}});
    },


    sell() {
      this.$toast("功能没有实现");
    },

    //退款功能
    application() {
      this.$router.push({path: '/refund', query: {orderId: this.shopInfoDetail.orderId}});
    },

    async getOrderDetail() {
      let params = {
        userId: this.$store.getters.user.userId,
        orderId: this.$route.query.orderId,
      };

      let res = await this.$axios.post(this.$api.getOrderDetailById, params);
      if (res.status === 200 && res.data.code === 200) {
        this.shopInfoDetail = res.data.data;
      } else {
        this.$toast(res.data.message);
      }

      //数据获取完成
      if (this.shopInfoDetail.logisticsInfoObj !== "") {
        this.flag = false;
      }
    },
  }
};
</script>
<style lang="less" scoped>
.order-detail {

  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }

  .express-container {
    background-color: #fff;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #eeeeee;

    .express-left {
      .left-icon-container {
        background-color: #20a1ff;
        display: inline-block;
        width: 40/16rem;
        height: 40/16rem;
        border-radius: 50%;
        text-align: center;
        padding: 10px;

        .left-img {
          width: 40/16rem;
          height: 40/16rem;
        }
      }
    }

    .express-content {

      .express-body {
        height: 60/16rem;

        .express_container {
          line-height: 60/16rem;
        }

        p {
          margin: 0;

          &:nth-child(1) {
            padding-bottom: 10px;
          }

          &:nth-child(2) {
            font-size: 14px;
          }
        }
      }

    }

    .express-right {
      height: 60/16rem;

      .right-icon {
        margin-top: 50%;
        transform: translateY(50%);
      }
    }
  }

  .address-container {
    padding-top: .5rem;
    background-color: #fff;
    padding-bottom: 1rem;

    .address-left {
      .left-icon-container {
        background-color: #ff9966;
        display: inline-block;
        width: 40/16rem;
        height: 40/16rem;
        border-radius: 50%;
        text-align: center;
        padding: 10px;

        .left-img {
          width: 40/16rem;
          height: 40/16rem;
        }
      }
    }

    .address-content {
      .address-body {
        height: 60/16rem;
        padding-right: 10px;

        p {
          margin: 0;

          &:nth-child(1) {
            padding-bottom: 10px;
          }

          &:nth-child(2) {
            font-size: 14px;
          }
        }
      }
    }
  }

  .shopInfo-container {
    padding: .5rem 0;
    background-color: #f5f5f5;

    .shopInfo-body {
      background-color: white;

      .shopInfo-title {
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 14px;

        .shop-icon {
          margin-left: .5rem;
          margin-right: 5px;
          vertical-align: middle;
        }

        .title-content {
          vertical-align: middle;
        }

        .shop-allow {
          margin-left: 5px;
          font-size: 12/16rem;
          vertical-align: middle;
        }
      }

      .shopInfo {

        padding: 10/16rem 0;

        .shopInfo-left {
          img {
            height: 80/16rem;
            width: 80/16rem;
          }
        }

        .shopInfo-content {
          height: 80/16rem;
          padding-right: .5rem;
          font-size: 14px;

          p {
            margin: 0;
          }

          .name {
            margin-bottom: 5px;
          }

          .description {
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .shopInfo-right {
          height: 80/16rem;
          padding-right: .5rem;

          p {
            margin: 0;
            font-size: 12px;
            text-align: right;
          }
        }
      }

      .operate {
        text-align: right;
        padding-right: 1.5rem;
        position: relative;

        .more {
          margin-top: .5rem;
          float: left;
          margin-left: 1rem;
        }

        .operateBtn {
          margin-left: .5rem;
        }

        .deleteContainer {
          position: absolute;
          top: 100%;
          left: 5%;
          box-shadow: 0 0 10px #ccc;
          padding: .5rem;
          border-radius: 4px;
          background-color: white;


          .direction {
            position: absolute;
            top: -11px;
            left: 0;
            transform: rotateZ(270deg);
            color: white;
          }

        }
      }

      .priceInfo {
        font-size: 10px;
        padding-top: .5rem;
        padding-left: 1rem;

        p {
          margin: 0;
          padding-bottom: 5px;

          span {
            float: right;
            margin-right: 1rem;
          }
        }
      }
    }
  }


  .orderInfo {
    padding: .5rem 0;
    background-color: #fff;

    p {
      margin: 0 0 5px 0;
      padding-left: 1rem;

      span {
        float: right;
        padding-right: 1.5rem;
      }
    }

    .order-label {
      margin: 0;
      font-size: 14px;
    }

    .order-id {
      font-size: 12px;
    }

    .order-createTime {
      font-size: 12px;
    }
  }

}
</style>
